<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>商品详情</title>
    <link rel="stylesheet" href="__CSS__/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="__CSS__/mui-3.6.1.min.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/score_goods_detail.css">
</head>
<body>
<div class="top-back-wrap" onclick="location.href='/Wx/Score/scoreShop'">
    <div class="topbar-back-icon"></div>
</div>
<div id="topBar" class="topbar-between horizontal-view top-bar-bg">
    <div class="topbar-back"></div>
    <div class="topbar-title">商品详情</div>
    <div class="topbar-right"></div>
</div>

<div id="mSlider" class="swiper-container" style="width: 100%;box-sizing: border-box;">
    <div class="swiper-wrapper" style="box-sizing: border-box">
        <if condition="$img">
            <volist name="img" id="ad">
                <div class="swiper-slide">
                    <a ><img class="goods-image" src="/{$ad.goodsImg}"></a>
                </div>
            </volist>
            <else/>
            <img src="/{$goodsInfo.goodsImg}" />
        </if>
    </div>
    <div class="swiper-pagination" style="bottom: 5px;"></div>
</div>

<div class="goods-name">{$goodsInfo.goodsName}</div>
<div class="horizontal-view goods-score-wrap">
    <img src="__IMG__/score_orange.png" width="16" height="16">
    <div class="goods-score">{$goodsInfo.shopPrice}</div>
</div>
<div class="text-gray">图文详情</div>
<div class="goods-detail" style="height: 500px;">
    {$goodsInfo.goodsContent}
</div>
<div class="horizontal-view bottom-bar">
    <div class="my-score">我的积分：{$score|default=0}</div>
    <button class="mui-btn mui-btn-yellow" onclick="location.href='/Wx/Score/scorepay?id={$goodsInfo.goodsId}&ref=Score_scoreGoods_id_{$goodsInfo.goodsId}'">马上兑换</button>
</div>

<script src="__JS__/mui-3.6.1.min.js"></script>
<script src="__JS__/swiper-3.4.2.min.js"></script>
<script src="__JS__/jquery2.1.1.min.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    var mSwiper = new Swiper('#mSlider', {
        autoplay: 2000,
        loop: true,
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        preventLinksPropagation: true,
        pagination: '.swiper-pagination',
        autoplayDisableOnInteraction: false
    });

    $(document).ready(function () {
        $(window).scroll(function () {
            var top = $("#mSlider").offset().top; //获取指定位置
            var scrollTop = $(window).scrollTop();  //获取当前滑动位置
            //滑动到该位置时执行代码
            var offset = scrollTop - top;
            if (offset < 25) {
                $("#topBar").css("opacity", 0);
            } else if (offset < 50) {
                $("#topBar").css("opacity", 0.2);
            } else if (offset < 80) {
                $("#topBar").css("opacity", 0.4);
            } else if (offset < 120) {
                $("#topBar").css("opacity", 0.6);
            } else if (offset < 180) {
                $("#topBar").css("opacity", 0.8);
            } else {
                $("#topBar").css("opacity", 1);
            }
        });
    });
</script>
</body>
</html>